<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #f2f0f0;
    }

    .top {
        background-color: #d9e9fb;
        padding: 0.8rem;
    }

    .top .title {
        color: #2882e1;
        font-size: 0.9rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .top .subtitle {
        color: #ccc;
        font-size: 0.8rem;
    }

    .submit {
        margin: 2rem 0.8rem;
        text-align: center;
        line-height: 2rem;
        height: 2rem;
        background-color: #2882e1;
        color: #fff;
        font-size: 0.8rem;
        border-radius: 10rem;
    }

    .submit:active {
        background-color: #ccc;
    }

    .imgs {
        padding: 0.8rem 0.5rem;
        background-color: #fff;
        display: flex;
    }

    .imgs .item {
        font-size: 0.8rem;
        margin-right: 1rem;
        text-align: center;
    }

    .imgs .item img {
        width: 5.9rem;
        object-fit: scale-down;
    }

    .imgs .item .title {
        margin-top: 0.5rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="top">
            <div class="title">为保证您的收入正常发放，请上传身份证正反面照片</div>
            <div class="subtitle">照片仅用于认证，祥愿堂保证您的信息安全</div>
        </div>
        <div class="imgs">
            <div class="item" onclick="uploadHeadimg(1)">
                <img :src="idcardFront ? idcardFront : '../image/sfz_f.png'" alt="">
                <div class="title">人像面</div>
            </div>
            <div class="item" onclick="uploadHeadimg(2)">
                <img :src="idcardBack ? idcardBack : '../image/sfz_z.png'" alt="">
                <div class="title">国徽面</div>
            </div>
        </div>
        <div class="submit" @click="submit">提交</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        // alert(JSON.stringify(api.pageParam))
        if(api.pageParam){
            app.idcardFront = api.pageParam.idcardFront
            app.idcardBack = api.pageParam.idcardBack
        }
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            idcardFront: "", // 身份证正面
            idcardBack: "", // 身份证背面
        },
        methods: {
            submit() {
                api.sendEvent({
                    name: "sendImg",
                    extra: {
                        idcardBack: app.idcardBack,
                        idcardFront: app.idcardFront
                    }
                });
                api.closeWin()
            }
        },

    })

    function uploadHeadimg(indexs) {
        api.actionSheet({
            title: '请选择方式',
            cancelTitle: '取消',
            buttons: ['相册', '拍照']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            if (index == 3) {
                return
            }
            switch (index) {
                case 1:
                    //打开相册
                    var trs = isJuris('photos', '需要获取您的相册权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相册权限失败")
                        return;
                    }
                    api.getPicture({
                        sourceType: 'library',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {

                            //返回的本地路径
                            var returnUrl = ret.data;
                            // if (app.headimg != "") {
                            //     app.headimg = returnUrl
                            // }
                            ajax_upimg(returnUrl, indexs)
                        } else {
                            //alert("网络不通畅，请稍后再试！");
                        }
                    });
                    break;
                case 2:
                    //打开拍照
                    var trs = isJuris('camera', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相机权限失败")
                        return;
                    }
                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {
                            //返回的本地路径
                            var returnUrl = ret.data;
                            // if (app.headimg != "") {
                            //     app.headimg = returnUrl
                            // }
                            ajax_upimg(returnUrl, indexs)
                        } else {
                            //alert("网络不通畅，请稍后再试！");
                        }
                    });
                    break;
            }
        });
    }

    //执行ajax上传图片
    function ajax_upimg(returnUrl, indexs) {
        // alert(returnUrl)
        api.ajax({
            url: "https://api.zetikeji.com/api/storage/file",
            method: 'post',
            data: {
                values: {
                    name: 'haha'
                },
                files: {
                    file: returnUrl
                }
            }
        }, function (ret, err) {
            // alert(JSON.stringify(ret))
            if (ret.code) {
                // alert(ret)
                if (indexs == 1) {
                    app.idcardFront = "https://oss.zetikeji.com/" + ret.data
                } else if (indexs == 2) {
                    app.idcardBack = "https://oss.zetikeji.com/" + ret.data
                }


            } else {
                // api.alert({
                //     msg: JSON.stringify(err)
                // });
            }
        });
    }
</script>